<template>
  <div v-if="currentProjectData">
    <el-table
      v-loading="loading"
      :data="currentProjectData"
      row-key="name"
      :show-header="false">
      <el-table-column
        prop="name"
        align="center"
        header-align="center"
      ></el-table-column>
      <el-table-column
        prop="value"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <el-popover v-if="scope.row.name === '创建者'" trigger="hover" placement="top" :open-delay="200" @show="loadUserInfo(scope.row.value)">
            <div slot="reference">{{ scope.row.value }}</div>
            <UserInfo :user-info="currentUserData"></UserInfo>
          </el-popover>
          <el-tag v-else-if="scope.row.name === '进度'" :type="mapTag(scope.row.value).type">{{ mapTag(scope.row.value).text }}</el-tag>
          <div v-else-if="scope.row.name === '描述'">
            <el-popover trigger="click" v-if="scope.row.value">
              <div slot="reference" title="查看项目详细描述">{{ generateText(scope.row.value) }}</div>
              <p>{{ scope.row.value }}</p>
            </el-popover>
            <el-tag type="info" v-else>暂无描述</el-tag>
          </div>
          <div v-else>{{ scope.row.value }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo'
import {getInfo} from '@/api/login'

const projectStateMap = {
  'PAUSED': {
    type: 'info',
    text: '已暂停',
    step: 1
  },
  'PROCESSING': {
    type: '',
    text: '进行中',
    step: 2
  },
  'COMPLETED': {
    type: 'success',
    text: '已完成',
    step: 3
  }
}

export default {
  name: 'ProjectInfo',
  components: {
    UserInfo
  },
  props: {
    project: [Object]
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    mapTag (state) {
      return projectStateMap[state]
    },
    generateText (text) {
      if (!text) {
        return '暂无项目描述'
      }
      if (text.length > 6) {
        return text.substr(0, 6) + '...'
      }
      return text
    },
    loadUserInfo (id) {
      getInfo(id).then(res => {
        this.$store.commit('SET_CURRENT_USER_DATA', res.data)
      })
    }
  },
  computed: {
    currentProjectData () {
      let project = this.project
      if (!project) {
        return []
      }
      return [
        {
          name: 'ID',
          value: project.id
        },
        {
          name: '名称',
          value: project.name
        },
        {
          name: '描述',
          value: project.description
        },
        {
          name: '进度',
          value: project.state
        },
        {
          name: '创建者',
          value: project.creatorId
        },
        {
          name: '创建时间',
          value: project.createTime
        }
      ]
    },
    currentUserData () {
      return this.$store.getters.currentUserData
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
